<template>
  <div class="list">
    <comment-input @mes="mes" :articleTitle="articleTitle" />
    <h3>评论</h3>
    <ul>
      <li v-show="commentList.length" v-for="(item ,index) in commentList" :key="item.item._id">
        <div class="commentHeight">
          <div class="avatar">
            <!-- 左边头像 -->
            <!-- #region -->
            <svg t="1667402538778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4509" width="40" height="40">
              <path
                d="M420.135822 790.755556h204.8v130.844444c0 56.553244-45.852444 102.4-102.4 102.4-56.558933 0-102.4-45.846756-102.4-102.4v-130.844444z"
                fill="#C5AC95" p-id="4510"></path>
              <path
                d="M120.211911 573.519644c0 50.050844 40.573156 90.624 90.624 90.624 50.045156 0 90.618311-40.573156 90.618311-90.624 0-50.045156-40.573156-90.618311-90.624-90.618311-50.045156 0-90.618311 40.573156-90.618311 90.624z"
                fill="#C9AB90" p-id="4511"></path>
              <path
                d="M412.444444 187.733333a164.977778 159.288889 90 1 0 318.577778 0 164.977778 159.288889 90 1 0-318.577778 0Z"
                fill="#4D4132" p-id="4512"></path>
              <path
                d="M492.760178 110.353067c166.832356 0 302.062933 135.236267 302.062933 302.068622v342.340267c0 88.974222-72.123733 161.097956-161.097955 161.097955H311.517867c-66.724978 0-120.820622-54.101333-120.820623-120.826311V412.421689c0-166.832356 135.230578-302.068622 302.062934-302.068622z"
                fill="#EBD3BD" p-id="4513"></path>
              <path
                d="M724.343467 573.519644c0 50.050844 40.573156 90.624 90.618311 90.624s90.624-40.573156 90.624-90.624c0-50.045156-40.578844-90.618311-90.624-90.618311s-90.624 40.573156-90.624 90.624z"
                fill="#EBD3BD" p-id="4514"></path>
              <path
                d="M774.684444 563.450311a40.277333 40.277333 0 1 0 80.554667 0.017067 40.277333 40.277333 0 0 0-80.554667-0.017067z"
                fill="#E89E80" p-id="4515"></path>
              <path
                d="M210.830222 442.624a80.554667 80.554667 0 1 0 161.103645 0c0-44.487111-36.067556-80.548978-80.554667-80.548978s-80.548978 36.067556-80.548978 80.554667z"
                fill="#FFFFFF" p-id="4516"></path>
              <path
                d="M251.107556 447.658667a35.242667 35.242667 0 1 0 70.485333 0 35.242667 35.242667 0 0 0-70.485333 0z"
                fill="#514141" p-id="4517"></path>
              <path
                d="M492.760178 442.624c0 44.487111 36.067556 80.554667 80.554666 80.554667s80.543289-36.067556 80.543289-80.554667-36.061867-80.548978-80.548977-80.548978-80.554667 36.067556-80.554667 80.554667z"
                fill="#FFFFFF" p-id="4518"></path>
              <path
                d="M533.037511 447.658667a35.242667 35.242667 0 1 0 70.479645 0 35.242667 35.242667 0 0 0-70.485334 0z"
                fill="#514141" p-id="4519"></path>
              <path
                d="M491.8784 588.913778a62.555022 62.555022 0 0 1 61.604978 12.071822l123.062044 107.6736a62.577778 62.577778 0 0 1 7.549156 86.328889l-5.637689 7.003022a62.577778 62.577778 0 0 1-1.649778 1.974045c-22.761244 26.0096-62.293333 28.649244-88.308622 5.893688l-27.886933-24.405333-28.842667 24.786489c-26.208711 22.528-65.718044 19.529956-88.240356-6.684444-0.318578-0.364089-0.625778-0.739556-0.938666-1.115023l-6.360178-7.759644a62.640356 62.640356 0 0 1-8.686933-13.994667l-33.348267 29.172622c-26.015289 22.755556-65.547378 20.115911-88.302933-5.893688a62.577778 62.577778 0 0 1-1.655467-1.974045l-5.637689-6.997333c-1.763556-2.195911-3.356444-4.471467-4.778667-6.815289l-24.7808 21.674667c-26.015289 22.755556-65.547378 20.1216-88.302933-5.888a62.577778 62.577778 0 0 1-1.655467-1.974045l-5.637689-6.997333a62.577778 62.577778 0 0 1 7.543467-86.334578l123.067733-107.6736c26.0096-22.755556 65.547378-20.115911 88.302934 5.893689a62.577778 62.577778 0 0 1 1.649778 1.974044l5.643377 6.997334c1.763556 2.195911 3.356444 4.471467 4.778667 6.815289l24.7808-21.674667a62.560711 62.560711 0 0 1 62.139733-11.889778z"
                fill="#4D4132" p-id="4520"></path>
              <path
                d="M407.176533 432.554667a35.9424 35.9424 0 0 1 33.769245 23.665777l37.558044 103.281778a70.485333 70.485333 0 0 1-66.224355 94.5664h-15.911823a70.485333 70.485333 0 0 1-65.223111-97.166222l41.329778-101.046044a37.495467 37.495467 0 0 1 34.702222-23.301689z"
                fill="#E89E80" p-id="4521"></path>
              <path d="M406.755556 153.6m-153.6 0a153.6 153.6 0 1 0 307.2 0 153.6 153.6 0 1 0-307.2 0Z" fill="#4D4132"
                p-id="4522"></path>
              <path
                d="M509.155556 164.977778a91.022222 88.177778 90 1 0 176.355555 0 91.022222 88.177778 90 1 0-176.355555 0Z"
                fill="#4D4132" p-id="4523"></path>
              <path
                d="M189.943536 336.16414m32.811066-9.408421l87.496175-25.089125q32.811066-9.408422 42.219488 23.402644l0 0q9.408422 32.811066-23.402644 42.219488l-87.496176 25.089124q-32.811066 9.408422-42.219488-23.402644l0 0q-9.408422-32.811066 23.402645-42.219487Z"
                fill="#4D4132" p-id="4524"></path>
              <path
                d="M471.33078 285.985891m32.811066 9.408422l131.244263 37.633687q32.811066 9.408422 23.402644 42.219487l0 0q-9.408422 32.811066-42.219487 23.402645l-131.244264-37.633687q-32.811066-9.408422-23.402644-42.219488l0 0q9.408422-32.811066 42.219488-23.402644Z"
                fill="#4D4132" p-id="4525"></path>
            </svg>
            <!-- #endregion -->
          </div>
          <div>
            <h4>IP: &nbsp;{{item.item.cip}}</h4>
            <p>{{dayjs(item.item.createTime - 0).format('YYYY-MM-DD')}}</p>
            <div>{{item.item.comment}}</div>
          </div>
          <div class="reply" @click="replyHandle(item.item,item.item.cip,index)">
            <!-- 回复图标 -->
            <!-- #region -->
            <svg t="1667407296888" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5548" width="20" height="20">
              <path
                d="M170.666667 136.533333m136.533333 0l512 0q136.533333 0 136.533333 136.533334l0 307.2q0 136.533333-136.533333 136.533333l-512 0q-136.533333 0-136.533333-136.533333l0-307.2q0-136.533333 136.533333-136.533334Z"
                fill="#FC7300" p-id="5549"></path>
              <path
                d="M170.666667 170.666667m136.533333 0l512 0q136.533333 0 136.533333 136.533333l0 307.2q0 136.533333-136.533333 136.533333l-512 0q-136.533333 0-136.533333-136.533333l0-307.2q0-136.533333 136.533333-136.533333Z"
                fill="#FA8511" p-id="5550"></path>
              <path
                d="M170.666667 273.066667h512a136.533333 136.533333 0 0 1 136.533333 136.533333v307.2a136.533333 136.533333 0 0 1-136.533333 136.533333h-188.757334l-67.242666 67.4816L359.1168 853.333333H170.666667a136.533333 136.533333 0 0 1-136.533334-136.533333v-307.2a136.533333 136.533333 0 0 1 136.533334-136.533333z"
                fill="#FBC476" p-id="5551"></path>
              <path
                d="M170.666667 307.2h512a136.533333 136.533333 0 0 1 136.533333 136.533333v307.2a136.533333 136.533333 0 0 1-136.533333 136.533334h-188.757334l-67.242666 67.4816L359.1168 887.466667H170.666667a136.533333 136.533333 0 0 1-136.533334-136.533334v-307.2a136.533333 136.533333 0 0 1 136.533334-136.533333z"
                fill="#FAB85F" p-id="5552"></path>
              <path
                d="M204.8 477.866667m34.133333 0l375.466667 0q34.133333 0 34.133333 34.133333l0 0q0 34.133333-34.133333 34.133333l-375.466667 0q-34.133333 0-34.133333-34.133333l0 0q0-34.133333 34.133333-34.133333Z"
                fill="#FFFFFF" p-id="5553"></path>
              <path
                d="M204.8 648.533333m34.133333 0l273.066667 0q34.133333 0 34.133333 34.133334l0 0q0 34.133333-34.133333 34.133333l-273.066667 0q-34.133333 0-34.133333-34.133333l0 0q0-34.133333 34.133333-34.133334Z"
                fill="#FFFFFF" p-id="5554"></path>
            </svg>
            <!-- #endregion -->
          </div>
          <div v-show="item.itemArr.length" @click="item.showList = !item.showList " class="replyList">
            {{item.showList ? "隐藏回复" :"展开回复"}}({{item.itemArr.length}})
            <div style="transform: translateY(2px);margin-left:5px">
              <el-icon :size="10" v-show="item.showList">
                <ArrowUpBold />
              </el-icon>
              <el-icon :size="10" v-show="!item.showList">
                <ArrowDownBold />
              </el-icon>
            </div>
          </div>
        </div>
        <transition name="replyShowList" appear mode="out-in">
          <ul v-show="item.itemArr.length  && item.showList" class="replyItem">
            <li v-for="i in item.itemArr" :key="i._id">
              <div class="commentHeight">
                <div class="avatar">
                  <!-- 左边头像 -->
                  <!-- #region -->
                  <svg t="1667402538778" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4509" width="20" height="20">
                    <path
                      d="M420.135822 790.755556h204.8v130.844444c0 56.553244-45.852444 102.4-102.4 102.4-56.558933 0-102.4-45.846756-102.4-102.4v-130.844444z"
                      fill="#C5AC95" p-id="4510"></path>
                    <path
                      d="M120.211911 573.519644c0 50.050844 40.573156 90.624 90.624 90.624 50.045156 0 90.618311-40.573156 90.618311-90.624 0-50.045156-40.573156-90.618311-90.624-90.618311-50.045156 0-90.618311 40.573156-90.618311 90.624z"
                      fill="#C9AB90" p-id="4511"></path>
                    <path
                      d="M412.444444 187.733333a164.977778 159.288889 90 1 0 318.577778 0 164.977778 159.288889 90 1 0-318.577778 0Z"
                      fill="#4D4132" p-id="4512"></path>
                    <path
                      d="M492.760178 110.353067c166.832356 0 302.062933 135.236267 302.062933 302.068622v342.340267c0 88.974222-72.123733 161.097956-161.097955 161.097955H311.517867c-66.724978 0-120.820622-54.101333-120.820623-120.826311V412.421689c0-166.832356 135.230578-302.068622 302.062934-302.068622z"
                      fill="#EBD3BD" p-id="4513"></path>
                    <path
                      d="M724.343467 573.519644c0 50.050844 40.573156 90.624 90.618311 90.624s90.624-40.573156 90.624-90.624c0-50.045156-40.578844-90.618311-90.624-90.618311s-90.624 40.573156-90.624 90.624z"
                      fill="#EBD3BD" p-id="4514"></path>
                    <path
                      d="M774.684444 563.450311a40.277333 40.277333 0 1 0 80.554667 0.017067 40.277333 40.277333 0 0 0-80.554667-0.017067z"
                      fill="#E89E80" p-id="4515"></path>
                    <path
                      d="M210.830222 442.624a80.554667 80.554667 0 1 0 161.103645 0c0-44.487111-36.067556-80.548978-80.554667-80.548978s-80.548978 36.067556-80.548978 80.554667z"
                      fill="#FFFFFF" p-id="4516"></path>
                    <path
                      d="M251.107556 447.658667a35.242667 35.242667 0 1 0 70.485333 0 35.242667 35.242667 0 0 0-70.485333 0z"
                      fill="#514141" p-id="4517"></path>
                    <path
                      d="M492.760178 442.624c0 44.487111 36.067556 80.554667 80.554666 80.554667s80.543289-36.067556 80.543289-80.554667-36.061867-80.548978-80.548977-80.548978-80.554667 36.067556-80.554667 80.554667z"
                      fill="#FFFFFF" p-id="4518"></path>
                    <path
                      d="M533.037511 447.658667a35.242667 35.242667 0 1 0 70.479645 0 35.242667 35.242667 0 0 0-70.485334 0z"
                      fill="#514141" p-id="4519"></path>
                    <path
                      d="M491.8784 588.913778a62.555022 62.555022 0 0 1 61.604978 12.071822l123.062044 107.6736a62.577778 62.577778 0 0 1 7.549156 86.328889l-5.637689 7.003022a62.577778 62.577778 0 0 1-1.649778 1.974045c-22.761244 26.0096-62.293333 28.649244-88.308622 5.893688l-27.886933-24.405333-28.842667 24.786489c-26.208711 22.528-65.718044 19.529956-88.240356-6.684444-0.318578-0.364089-0.625778-0.739556-0.938666-1.115023l-6.360178-7.759644a62.640356 62.640356 0 0 1-8.686933-13.994667l-33.348267 29.172622c-26.015289 22.755556-65.547378 20.115911-88.302933-5.893688a62.577778 62.577778 0 0 1-1.655467-1.974045l-5.637689-6.997333c-1.763556-2.195911-3.356444-4.471467-4.778667-6.815289l-24.7808 21.674667c-26.015289 22.755556-65.547378 20.1216-88.302933-5.888a62.577778 62.577778 0 0 1-1.655467-1.974045l-5.637689-6.997333a62.577778 62.577778 0 0 1 7.543467-86.334578l123.067733-107.6736c26.0096-22.755556 65.547378-20.115911 88.302934 5.893689a62.577778 62.577778 0 0 1 1.649778 1.974044l5.643377 6.997334c1.763556 2.195911 3.356444 4.471467 4.778667 6.815289l24.7808-21.674667a62.560711 62.560711 0 0 1 62.139733-11.889778z"
                      fill="#4D4132" p-id="4520"></path>
                    <path
                      d="M407.176533 432.554667a35.9424 35.9424 0 0 1 33.769245 23.665777l37.558044 103.281778a70.485333 70.485333 0 0 1-66.224355 94.5664h-15.911823a70.485333 70.485333 0 0 1-65.223111-97.166222l41.329778-101.046044a37.495467 37.495467 0 0 1 34.702222-23.301689z"
                      fill="#E89E80" p-id="4521"></path>
                    <path d="M406.755556 153.6m-153.6 0a153.6 153.6 0 1 0 307.2 0 153.6 153.6 0 1 0-307.2 0Z"
                      fill="#4D4132" p-id="4522"></path>
                    <path
                      d="M509.155556 164.977778a91.022222 88.177778 90 1 0 176.355555 0 91.022222 88.177778 90 1 0-176.355555 0Z"
                      fill="#4D4132" p-id="4523"></path>
                    <path
                      d="M189.943536 336.16414m32.811066-9.408421l87.496175-25.089125q32.811066-9.408422 42.219488 23.402644l0 0q9.408422 32.811066-23.402644 42.219488l-87.496176 25.089124q-32.811066 9.408422-42.219488-23.402644l0 0q-9.408422-32.811066 23.402645-42.219487Z"
                      fill="#4D4132" p-id="4524"></path>
                    <path
                      d="M471.33078 285.985891m32.811066 9.408422l131.244263 37.633687q32.811066 9.408422 23.402644 42.219487l0 0q-9.408422 32.811066-42.219487 23.402645l-131.244264-37.633687q-32.811066-9.408422-23.402644-42.219488l0 0q9.408422-32.811066 42.219488-23.402644Z"
                      fill="#4D4132" p-id="4525"></path>
                  </svg>
                  <!-- #endregion -->
                </div>
                <div>
                  <h4>{{i.cip}}&emsp;回复&emsp;{{i.uip}}</h4>
                  <p>{{dayjs(i.createTime - 0).format('YYYY-MM-DD')}}</p>
                  <div class="info">{{i.comment}}</div>
                </div>
                <div class="reply" @click="replyHandle(item.item,i.cip,index)">
                  <!-- 回复图标 -->
                  <!-- #region -->
                  <svg t="1667407296888" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5548" width="20" height="20">
                    <path
                      d="M170.666667 136.533333m136.533333 0l512 0q136.533333 0 136.533333 136.533334l0 307.2q0 136.533333-136.533333 136.533333l-512 0q-136.533333 0-136.533333-136.533333l0-307.2q0-136.533333 136.533333-136.533334Z"
                      fill="#FC7300" p-id="5549"></path>
                    <path
                      d="M170.666667 170.666667m136.533333 0l512 0q136.533333 0 136.533333 136.533333l0 307.2q0 136.533333-136.533333 136.533333l-512 0q-136.533333 0-136.533333-136.533333l0-307.2q0-136.533333 136.533333-136.533333Z"
                      fill="#FA8511" p-id="5550"></path>
                    <path
                      d="M170.666667 273.066667h512a136.533333 136.533333 0 0 1 136.533333 136.533333v307.2a136.533333 136.533333 0 0 1-136.533333 136.533333h-188.757334l-67.242666 67.4816L359.1168 853.333333H170.666667a136.533333 136.533333 0 0 1-136.533334-136.533333v-307.2a136.533333 136.533333 0 0 1 136.533334-136.533333z"
                      fill="#FBC476" p-id="5551"></path>
                    <path
                      d="M170.666667 307.2h512a136.533333 136.533333 0 0 1 136.533333 136.533333v307.2a136.533333 136.533333 0 0 1-136.533333 136.533334h-188.757334l-67.242666 67.4816L359.1168 887.466667H170.666667a136.533333 136.533333 0 0 1-136.533334-136.533334v-307.2a136.533333 136.533333 0 0 1 136.533334-136.533333z"
                      fill="#FAB85F" p-id="5552"></path>
                    <path
                      d="M204.8 477.866667m34.133333 0l375.466667 0q34.133333 0 34.133333 34.133333l0 0q0 34.133333-34.133333 34.133333l-375.466667 0q-34.133333 0-34.133333-34.133333l0 0q0-34.133333 34.133333-34.133333Z"
                      fill="#FFFFFF" p-id="5553"></path>
                    <path
                      d="M204.8 648.533333m34.133333 0l273.066667 0q34.133333 0 34.133333 34.133334l0 0q0 34.133333-34.133333 34.133333l-273.066667 0q-34.133333 0-34.133333-34.133333l0 0q0-34.133333 34.133333-34.133334Z"
                      fill="#FFFFFF" p-id="5554"></path>
                  </svg>
                  <!-- #endregion -->
                </div>
              </div>
            </li>
          </ul>
        </transition>
        <transition name="replyShow" appear mode="out-in">
          <div v-if="item.item.showReply && item.item._id">
            <comment-reply :mainIp="item.item._id" @commentReply="commentReply">
            </comment-reply>
          </div>
        </transition>

      </li>
    </ul>
    <div v-show="!commentList.length">
      <el-empty :image-size="50" description="没有评论" />
    </div>
    <!-- 分页 -->

    <div style="display:flex;justify-content: flex-end;padding:20px ;">
      <el-pagination :hide-on-single-page="pageFlag" :total="count" layout="prev, pager, next" :page-size="6"
        @current-change="handlePage" />
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from '@vue/runtime-core'
import CommentInput from './comment/CommentInput.vue'
import http from '@/utils/http'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import CommentReply from './comment/CommentReply.vue'
export default {
  components: { CommentInput, CommentReply },
  props: ['articleTitle'],
  setup (props) {
    const route = useRoute()
    const data = reactive({
      commentList: [],
      count: 0,
      pageFlag: true,
      // 定义要回复的对象
      uip: '',
      item: null,
      showList: true,
      index: 0
    })
    onMounted(() => {
      getComment()
    })
    // 监听传来数据
    function mes (res) {
      data.commentList.unshift({ item: res, itemArr: [] })
    }
    // 去请求 数据
    function getComment (page = 1) {
      http.get(`/comment?page=${page}&limit=6&articleId=${route.query.id}`).then(res => {
        data.commentList = res.data.info.data
        data.count = res.data.info.num
      })
    }
    function handlePage (page) {
      getComment(page)
    }
    // 显示回复框
    function replyHandle (item, cip, index) {
      data.item = item
      data.uip = cip
      data.index = index
      item.mainIp || data.commentList.forEach(ele => {
        ele.item.showReply = false
      });
      if (!item._id) {
        ElMessage({
          showClose: true,
          message: '请求繁忙建议刷新一下',
          type: 'success',
        })
        return
      };
      item.showReply = !item.showReply
    }
    // 回复
    function commentReply (res) {

      http.post('/comment/reply', {
        ...res, uip: data.uip, articleTitle: props.articleTitle
      }).then(() => {
        data.commentList[data.index].itemArr.push({ ...res, uip: data.uip, createTime: Date.now() })
        ElMessage({
          message: '评论成功',
          type: 'success',
        })
      })
      data.item.showReply = false
    }
    return {
      ...toRefs(data),
      dayjs,
      mes,
      handlePage,
      replyHandle,
      commentReply
    }
  }
}
</script>
<style lang='scss'>
li {
  .comment-textarea {
    margin-left: 100px;
  }
}
</style>
<style lang="scss" scoped>
.list {
  background: #fff;
  max-width: 1200px;
  margin: auto;
  margin-bottom: 30px;
  h3 {
    font-size: 20px;
    font-weight: 700;
    padding: 0 30px;
    color: #434948;
  }
  ul li {
    position: relative;
    margin: 20px 0;
    color: #434948;
    border-bottom: 1px solid #ddd;
    padding: 0 30px;
    overflow: hidden;
    .replyItem {
      li {
        margin: 0px 0;
        margin-left: 30px;
        padding-left: 30px;
        border: 0;
        padding-top: 5px;
        border-top: 1px solid #ddd;
        .info {
          font-size: 12px;
        }
        .reply {
          position: absolute;
          right: 70px;
          top: 10px;
        }
      }
      .commentHeight > div {
        margin: 0;
      }
    }
    .commentHeight {
      display: flex;
    }
    .reply {
      position: absolute;
      right: 100px;
      top: 10px;
    }
    .avatar {
      margin: 0 10px;
    }
    h4 {
      padding: 5px 0 0;
      font-size: 14px;
    }
    p {
      font-size: 12px;
      color: #b3b3b3;
    }
    div {
      font-size: 16px;
      line-height: 1.75;
      margin-bottom: 5px;
      white-space: pre-line;
      word-wrap: break-word;
      color: #777;
      word-break: break-all;
    }
  }
}

.replyList {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  right: 10px;
  top: 68px;
  font-size: 12px !important;
  align-items: center;
}

// 显示和隐藏
.replyShow-enter-active {
  overflow: hidden;
  animation: isDemo3 0.5s reverse;
}
.replyShow-leave-active {
  animation: isDemo3 0.5s;
}
@keyframes isDemo3 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(5%);
    opacity: 0;
  }
}
// 显示和隐藏
.replyShowList-enter-active {
  overflow: hidden;
  animation: isDemo4 0.5s reverse;
}
.replyShowList-leave-active {
  animation: isDemo4 0.5s;
}
@keyframes isDemo4 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}
</style>